<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>首页，欢迎租车</title>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.6.2/css/layui.css"/>
</head>
<style>
    .layui-body {
        margin-top: 60px;
        position: initial !important;
    }

    .center-context {
        background: #f2f2f2;
    }

    .call-board > a {
        height: 25px;
        padding-left: 5px;
    }

    .layui-footer {
        left: 0 !important;
        text-align: center;
    }
</style>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">汽车租赁</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="/main">首页</a></li>
      <li class="layui-nav-item"><a th:href="'/main/type?carTypeId='+${types.get(0).id}">车辆分类</a></li>
      <li class="layui-nav-item layui-this"><a href="#">公告</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li th:if="not ${session.customerId}" class="layui-nav-item"><a id="login" href="/customerLogin">登录</a></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><span th:text="${session.customer.username}"></span></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><a href="/myOrder">我的订单</a></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><a href="/customerInfo">个人中心</a></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><a id="exit" href="/customer/exit">退出</a></li>
    </ul>
  </div>

  <div class="layui-body layui-container">
    <div class="layui-container" style="padding: 15px;">
      <div class="layui-row  layui-col-space10">
        <div class="layui-col-md2">
          <div style="text-align: center">汽车分类</div>
          <div class="layui-panel">
            <ul class="layui-menu">
              <li th:each="type:${types}">
                <div class="layui-menu-body-title">
                  <a th:href="'/main/type?carTypeId='+${type.id}" th:text="${type.name}"></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="layui-col-md8 center-context">
          <h1 style="text-align: center">[[${notice.title}]]</h1>
          <p>[[${notice.context}]]</p>
        </div>
        <div class="layui-col-md2">
          <div style="text-align: center">公告</div>
          <div class="layui-panel call-board">
            <div th:each="notice:${notices}"><a th:href="'/main/notice/'+${notice.id}">[[${notice.title}]]</a></div>
            <div style="text-align: center" th:if="${notices.size() eq 0}"> 暂无</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    1998-2021© rent-car.com - 底部固定区域
  </div>
</div>
<script src="https://www.layuicdn.com/layui-v2.6.2/layui.js"></script>
<script>
  layui.use('carousel', function () {
    const carousel = layui.carousel;
    //图片轮播
    carousel.render({
      elem: '#test10'
      , width: '750px'
      , height: '440px'
      , interval: 5000
    });

  })
</script>
</body>
</html>